<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>音乐</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href='css/index.css'>
    <script src='js/index.js'></script>
</head>

<body>
    <!--最外层-->
    <div id="wrapper">
        <!--头部-->
        <header id="header">
            <!--一级导航栏开始-->
            <div class="headTop">
                <!--版心元素-->
                <div class="headTopmain">
                    <!--Logo-->
                    <div class="logo">
                        <a href="index.html">
                            <img src="image/logo.png" alt="">
                            <h1>网抑云音乐</h1>
                        </a>
                    </div>
                    <!--选项-->
                    <div class="option">
                        <a class="index" href="index.html">发现音乐
                            <!--箭头-->
                            <div class="arrow">
                                <img id="arrow" src="image/headTop_arrow.png"></img>
                            </div>
                        </a>
                        <a class="my" href="my.html">我的音乐</a>
                        <a class="friend" href="friend.html">关注</a>
                        <a class="store" href="store.html">商城</a>
                        <a class="musician" href="musician.html">音乐人</a>
                        <a class="st" href="st.html">云推歌</a>
                        <a class="downlaod" href="download.html">下载客户端</a>
                    </div>
                    <!--搜索框-->
                    <div class="search">
                        <!--版心元素-->
                        <div class="searchMain">
                            <input type="text" placeholder="音乐/视频/电台/用户"></input>
                            <img src="image/magnifier.png"></img>
                        </div>
                    </div>
                    <!--创作者中心-->
                    <div class="creator">
                        <a href="creator.html">创作者中心</a>
                    </div>
                    <!--登录-->
                    <div class="login">
                        <a href="login.html">登录</a>
                    </div>
                </div>
            </div>
            <!--一级导航栏结束-->

            <!--二级导航栏开始-->
            <div class="headBottom">
                <!--版心元素-->
                <div class="headBottomMain">
                    <div class="headBottomOption">
                        <ul>
                            <a href="index.html">推荐</a>
                            <a href="index.html">排行榜</a>
                            <a href="index.html">歌单</a>
                            <a href="index.html">主播电台</a>
                            <a href="index.html">歌手</a>
                            <a href="index.html">新碟上架</a>
                        </ul>
                    </div>
                </div>
            </div>
            <!--二级导航栏结束-->
        </header>
    </div>
    <!--推荐页内容-->
    <div class="recommend">
        <!--版心元素-->
        <div class="recommendMain">
            <!--上边区域-->
            <div id="recommendTop">
                <!--版心元素-->
                <div class="recommendTopMain">
                    <div class="recommendTopCenter">
                        <!--轮播图-->
                        <div class="recommendTopBanner">
                            <div class="banner-item active">
                                <img class="img" src="image/Carousel.jpg" alt="Image 1">
                            </div>
                            <div class="banner-item">
                                <img class="img" src="image/Carousel2.jpg" alt="Image 2">
                            </div>
                            <!-- 小点点 -->
                            <div class="dots">
                                <span class="dot" onclick="currentSlide(1)"></span> 
                                <span class="dot" onclick="currentSlide(2)"></span> 
                            </div>
                        </div>
                        

                        <!--下载区域-->
                        <div class="recommendTopDownload">
                            <img src="image/download.png"></img>
                        </div>
                        
                    </div>

                    <!--推荐大图的左右切换-->
                    <a class="slide prev" onclick="moveSlide(-1)">
                        <h1 class="text">&lt;</h1></a>
                    <a class="slide next" onclick="moveSlide(1)">
                        <h1 class="text">&gt;</h1></a>
                </div>

            </div>

            <!--下边区域-->
            <div class="recommendBottom">
            </div>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>

</html>